<template>
  <view class="content">
    <view
      class="item"
      v-for="(item, index) in bankList"
      :key="index"
      @click="handleTabs"
    >
      <view class="left">
        <image :src="Domain_ICON + item.img" mode="scaleToFill"></image>
      </view>
      <view class="right">
        <view class="title">{{ item.name }}</view>
        <view class="cont">
          <text
            ><text class="text-success">贷款金额: </text>{{ item.money }}</text
          >
          <text
            ><text class="text-success">还款日期: </text>{{ item.term }}</text
          >
          <text><text class="text-success">利息: </text>{{ item.profit }}</text>
          <text
            ><text class="text-success">分期: </text>{{ item.purchase }}</text
          >
        </view>
      </view>
    </view>
  </view>
</template>


<script>
const app = getApp();
export default {
  data() {
    return {
      Domain_ICON: app.globalData.Domain_ICON,
      bankList: [
        {
          img: "/China_Constuction_Bank.png",
          name: "建设银行",
          money: "最高金额可达1000万",
          term: "最迟还款期限可至9个月",
          profit: "利息最低0.03%",
          purchase: "支持分期3/12/24期还款",
        },
        {
          img: "/China_Merchants_Bank.png",
          name: "招商银行",
          money: "最高金额可达1000万",
          term: "最迟还款期限可至9个月",
          profit: "利息最低0.03%",
          purchase: "支持分期3/12/24期还款",
        },
        {
          img: "/PBOC.png",
          name: "人民银行",
          money: "最高金额可达1000万",
          term: "最迟还款期限可至9个月",
          profit: "利息最低0.03%",
          purchase: "支持分期3/12/24期还款",
        },
        {
          img: "/ICBC.png",
          name: "工商银行",
          money: "最高金额可达1000万",
          term: "最迟还款期限可至9个月",
          profit: "利息最低0.03%",
          purchase: "支持分期3/12/24期还款",
        },
      ],
    };
  },
  methods: {
    handleTabs(url) {
      uni.navigateTo({
        url: "/pages/LogisticsFinance/Bankdetails",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  // height: calc(100vh - 0px);
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #f5f5f5;

  .item {
    border-radius: 20rpx;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: 0 0 30rpx 0;

    .title {
      font-size: 40rpx;
      font-weight: bold;
      margin: 10rpx 0;
    }

    .cont {
      font-size: 24rpx;
      display: flex;
      flex-direction: column;

      text {
        display: inline-block;
        margin: 10rpx 0 0 0;
      }
    }
  }

  .left {
    image {
      width: 120rpx;
      height: 120rpx;
    }
  }

  .right {
    margin: 0 0 0 20rpx;
    padding: 20rpx;
    box-sizing: border-box;
  }
}
</style>